/*
 * @Author: your name
 * @Date: 2022-04-11 21:00:49
 * @LastEditTime: 2022-04-15 16:11:18
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \type-h5\src\pages\file\file-search-bar\index.tsx
 */
import React, { useState } from "react";
import { AtSearchBar } from "taro-ui";
import { Input } from "@tarojs/components";
import classNames from "classnames";
import "./index.scss";
import searchIcon from "../../../assets/search.png";

export const FileSearchBar = ({
  value,
  onInput,
}: {
  value: string;
  onInput: (value) => void;
}) => {
  const handleInput = (e) => {
    onInput(e.detail.value);
  };
  return (
    <div className="file-search-bar">
      <img src={searchIcon} />
      <Input
        className={classNames("search-input", {
          placeholder: !value,
        })}
        placeholder="搜索"
        value={value}
        onInput={handleInput}
      ></Input>
    </div>
  );
};

export const AtFileSearchBar = ({
  value,
  onInput,
}: {
  value: string;
  onInput: (value) => void;
}) => {
  const [focus, setFocus] = useState(false);
  return (
    <AtSearchBar
      className={classNames("file-search-at", {
        focus: focus || value,
      })}
      actionName="取消"
      value={value}
      onChange={onInput}
      onFocus={() => {
        setFocus(true);
      }}
      onBlur={() => {
        setFocus(false);
      }}
      onActionClick={() => {
        onInput("");
      }}
    />
  );
};
